<template>
  <div class="video-control">
    <div class="video-control-header">
      <div
        class="video-control-header-item"
        :class="{
          active: active == item.label
        }"
        @click="handleTabClick(item)"
        v-for="(item, index) in tabs"
        :key="item.label"
      >
        <split-vline style="float:left;margin:15px 0 0 0;" v-if="index > 0"></split-vline>
        {{ item.label }}
      </div>
    </div>
    <div class="video-control-body">
      <div class="margin-15">
        <div v-if="active == '历史回放'">
          <el-date-picker
            type="daterange"
            v-model="hisData.dateRange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '100%' }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
          ></el-date-picker>
          <list-view :list="hisData.recordList" :click-row="handleHisDataClickRow">
            <template #title="{ row }">
              <div>
                {{ row.title }}
                <i></i>
              </div>
            </template>
          </list-view>
        </div>

        <div v-else>
          <cut-picture :on-click="handleCutPictrue"></cut-picture>
          <div class="margin-top-50">
            <key-board></key-board>
          </div>
          <div class="margin-top-50">
            <video-log></video-log>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KeyBoard from '@/views/reservoir/videoMonitor/components/KeyBoard'
import CutPicture from '@/views/reservoir/videoMonitor/components/CutPicture'
import VideoLog from '@/views/reservoir/videoMonitor/components/VideoLog'

export default {
  name: 'ControlPanel',
  components: {
    KeyBoard,
    CutPicture,
    VideoLog
  },
  data() {
    return {
      dialogVisible: false,
      active: '实时监控',
      tabs: [
        {
          label: '实时监控'
        },
        {
          label: '历史回放'
        }
      ],
      hisData: {
        dateRange: [],
        queryObj: {},
        recordList: [
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' },
          { title: '202109021101' }
        ]
      }
    }
  },
  methods: {
    // 切换选项卡
    handleTabClick(item) {
      this.active = item.label
    },
    // 历史数据点击
    handleHisDataClickRow(row) {},
    // 截图
    handleCutPictrue() {
      alert('截图')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
